<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Document</title>
  </head>
  <body class="bg-black">
    <!-- Component By Anoop2005 -->
    <!-- Compnent start's here -->

    <div class="flex items-center justify-center">
      <div class="grid grid-cols-2 gap-5 justify-center items-center">
        <div
          class="card w-48 hover:shadow-none items-center h-max bg-sky-500 border-4 border-black rounded-lg shadow-[4px_4px_0px_rgb(0,0,1)] dark:shadow-neutral-500 dark:border-white"
        >
          <div class="px-6 py-5 text-left h-full">
            <p class="text-base mb-4">October 5th, 2024</p>
            <h1 class="text-[32px] mb-4">Card Title</h1>
            <p class="text-xs mb-4 line-clamp-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
              fuga et aspernatur illum unde eum veritatis debitis ex, aperiam
              aliquid neque quaerat quae officiis ut, deserunt saepe? Dolore,
              veniam eius!
            </p>
            <strong class="cursor-pointer">Read More</strong>
          </div>
        </div>
        <div
          class="card w-48 hover:shadow-none items-center h-max bg-emerald-500 border-4 border-black rounded-lg shadow-[4px_4px_0px_rgb(0,0,1)] dark:shadow-neutral-500 dark:border-white"
        >
          <div class="px-6 py-5 text-left h-full">
            <p class="text-base mb-4">October 5th, 2024</p>
            <h1 class="text-[32px] mb-4">Card Title</h1>
            <p class="text-xs mb-4 line-clamp-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
              fuga et aspernatur illum unde eum veritatis debitis ex, aperiam
              aliquid neque quaerat quae officiis ut, deserunt saepe? Dolore,
              veniam eius!
            </p>
            <strong class="cursor-pointer">Read More</strong>
          </div>
        </div>
        <div
          class="card w-48 hover:shadow-none items-center h-max bg-amber-500 border-4 border-black rounded-lg shadow-[4px_4px_0px_rgb(0,0,1)] dark:shadow-neutral-500 dark:border-white"
        >
          <div class="px-6 py-5 text-left h-full">
            <p class="text-base mb-4">October 5th, 2024</p>
            <h1 class="text-[32px] mb-4">Card Title</h1>
            <p class="text-xs mb-4 line-clamp-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
              fuga et aspernatur illum unde eum veritatis debitis ex, aperiam
              aliquid neque quaerat quae officiis ut, deserunt saepe? Dolore,
              veniam eius!
            </p>
            <strong class="cursor-pointer">Read More</strong>
          </div>
        </div>
        <div
          class="card w-48 hover:shadow-none items-center h-max bg-pink-500 border-4 border-black rounded-lg shadow-[4px_4px_0px_rgb(0,0,1)] dark:shadow-neutral-500 dark:border-white"
        >
          <div class="px-6 py-5 text-left h-full">
            <p class="text-base mb-4">October 5th, 2024</p>
            <h1 class="text-[32px] mb-4">Card Title</h1>
            <p class="text-xs mb-4 line-clamp-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
              fuga et aspernatur illum unde eum veritatis debitis ex, aperiam
              aliquid neque quaerat quae officiis ut, deserunt saepe? Dolore,
              veniam eius!
            </p>
            <strong class="cursor-pointer">Read More</strong>
          </div>
        </div>
      </div>
    </div>

    <!-- Component end's here-->
  </body>
</html>
